<!-- APP.vue -->
<template>
  <div id="app">
    <my-header :addTodo="addTodo"/>
    <my-list :todos="todos"/>
    <my-footer :todos="todos" v-show="this.todos.length > 0"/>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyList from './components/MyList.vue'
import MyFooter from './components/MyFooter.vue'

export default {
  name: 'App',
  components: {
    MyHeader,
    MyList,
    MyFooter
  },
  data() {
    return {
      todos: [
        {
          id: '001',
          title: '写代码',
          done: false,
          isEdit: false
        }
      ]
    }
  },
  mounted() {
    // 获取 todos
    this.todos = localStorage.getItem('todos') === null || localStorage.getItem('todos').length === 0 ? [] : JSON.parse(localStorage.getItem('todos'))
  
    // 自定义事件：获取todoId，删除对应的 todo
    this.$bus.$on('delTodoByTodoId', todoId => this.delTodo(todoId))

    // 自定义事件：获取todoId，切换对应的 todo.done
    this.$bus.$on('switchDoneByTodoId', todoId => this.switchDone(todoId))
    
    // 自定义事件：切换（非）全选状态
    this.$bus.$on('switchIsAllByStatus', isAll => this.switchIsAll(isAll))

    // 自定义事件：删除所有选中的 todo
    this.$bus.$on('delAllByDone', () => this.delAll())

    // 自定义事件：根据 todoId 修改对象的 edit 的值
    this.$bus.$on('switchEditByTodoId', todoId => this.switchEdit(todoId))

    // 自定义事件：根据 todoId 修改 title
    this.$bus.$on('updateTitleByTodoId', ({ todoId, title }) => this.updateTitle(todoId, title))
  },
  beforeDestroy() {
    // 解绑自定义事件
    this.$bus.$off('delTodoByTodoId')
    this.$bus.$off('switchDoneByTodoId')
    this.$bus.$off('switchIsAllByStatus')
    this.$bus.$off('delAllByDone')
    this.$bus.$off('switchEditByTodoId')
    this.$bus.$off('updateTitleByTodoId')
  },
  methods: {
    /**
     * 添加：接收todo
     */
    addTodo(todoObj){
      // console.log('@@@todoObj', todoObj)
      this.todos.unshift(todoObj)
      // 持久化
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },

    /**
     * 删除
     */
    delTodo(todoId){
      // console.log(todoId)
      this.todos = this.todos.filter(todo => todo.id !== todoId)
      // 持久化
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },

    /**
     * 切换选中状态
     */
    switchDone(todoId){
      this.todos = this.todos.map(todo => todo.id === todoId ? { ...todo, done : !todo.done } : todo)
      // 持久化
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },

    /**
     * 切换是否全选
     */
    switchIsAll(isAll){
      this.todos.forEach(todo => todo.done = isAll)
      // 持久化
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },

    /**
     * 删除所有选中的 todo
     */
    delAll() {
      this.todos = this.todos.filter(todo => todo.done === false)
      // 持久化
      localStorage.setItem('todos', JSON.stringify(this.todos))
    },

    /**
     * 切换 todo.edit
     */
    switchEdit(todoId){
      this.todos.forEach(todo => {
        if(todo.id === todoId) todo.isEdit = !todo.isEdit
      })
    },

    /**
     * 更新 title
     */
    updateTitle(todoId, title) {
      // console.log(todoId)
      // console.log(title)

      this.todos.forEach(todo => {
        if(todo.id === todoId) {
          // 修改title
          todo.title = title
          // 修改状态
          todo.isEdit = !todo.isEdit
        }
      })

      // 持久化
      localStorage.setItem('todos', JSON.stringify(this.todos))

    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 500px;
  margin: 60px auto;
  border: 1px solid rgb(209, 209, 209);
  padding: 20px;
  border-radius: 7px;
}
</style>